<style lang="less">
@import "witnessRecord.less";
</style>
<style lang="less" scoped>
@import "../../../assets/css/applyList.less";
</style>
<template>
    <div class="witnessRecord search applyList">
        <Form ref="searchForm" :model="searchForm" inline :label-width="140" class="search-form rui-query-form">
            <div class="applyQuerySearchRow">
                <div class="applyQueryHead"></div>
                <div class="applyQuerySearchItem">
                    <Form-item label="" prop="socUniCrtCode">
                        <div>
                            <Input prefix="ios-search" type="text" v-model="searchForm.key" @keyup.enter.native="handleSearch" clearable placeholder="姓名、身份证、电话"
                            />
                            <a :style="{display:'block',width:'40px',lineHeight: '24px',marginLeft: '16px'}"  @click="dropDown">
                                {{dropDownContent}}
                                <Icon :type="dropDownIcon"></Icon>
                            </a>
                        </div>
                    </Form-item>
                </div>
            </div>
            <div v-if="drop" class="applyQuerySearchMore table-card">
                <div  class="applyQuerySearchMoreRow">
                    <div class="rui-query-form-item">
                        <Form-item label="姓名" prop="witnessName">
                            <Input type="text" v-model="searchForm.witnessName" clearable placeholder="请输入见证人姓名" />
                        </Form-item>
                    </div>
                    <div class="rui-query-form-item">
                        <Form-item label="身份证号码" prop="witnessIdCard">
                            <Input type="text" v-model="searchForm.witnessIdCard" clearable placeholder="见证人身份证号码" />
                        </Form-item>
                    </div>
                    <div class="rui-query-form-item">
                        <Form-item label="电话号码" prop="witnessContactNumber" :rules="limitPut">
                            <Input type="text" v-model="searchForm.witnessContactNumber" clearable placeholder="见证人电话号码"/>
                        </Form-item>
                    </div>
                    <div class="rui-query-form-item">
                        <Form-item label="状态" prop="status">
                            <Select v-model="searchForm.status" placeholder="请选择" clearable >
                                <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.title }}
                                </Option>
                            </Select>
                        </Form-item>
                    </div>
                    <div class="rui-query-form-item">
                        <Form-item label="业务类型" prop="businessAttributes">
                            <Checkbox v-model="newCar">新车</Checkbox>
                            <Checkbox v-model="oldCar">二手车</Checkbox>
                        </Form-item>
                    </div>
                </div>
                <div style="text-align: center">
                    <Button @click="handleSearch" type="primary">查询</Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Button @click="handleReset">重置</Button>
                </div>
            </div>
        </Form>
        <div class="table-card">
            <div class="btn-status flex flex-between">
                <div class="loanApplyBtn">
                    <Button v-has="'button_witness_add'" @click="add" class="btn" size="default">新增申请</Button>
                    <Button v-has="'button_witness_stop'" @click="checkRole" class="btn" type="error" size="default">批量停用</Button>
                </div>
            </div>
            <div class="rui-table-box">
                <Table :loading="loading" :columns="columns" :data="data" sortable="custom"
                       @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table">

                    <template slot-scope="{ row,  }" slot="witnessIdCard">
                        <a  type="primary" size="small" @click="see(row)">{{row.witnessIdCard}}
                        </a>
                    </template>

                    <template slot-scope="{ row }" slot="businessAttributes">
                        <div v-if="row.businessAttributes == '1'">
                            二手车
                        </div>
                        <div v-if="row.businessAttributes == '0'">
                            新车
                        </div>
                    </template>

                    <template slot-scope="{ row,  }" slot="status">
                        <Badge v-if="row.status==='00'" text="启用" color="#67c23a"/>
                        <Badge v-if="row.status==='01'" text="审核中" color="#999"/>
                        <Badge v-if="row.status==='02'" text="草稿" color="#999"/>
                        <Badge v-if="row.status==='03'" text="退回" color="#e6a23c"/>
                        <Badge v-if="row.status==='04'" text="拒绝" color="#e6a23c"/>
                        <Badge v-if="row.status==='05'" text="停用" color="#f56c6c"/>

<!--                        <div v-if="row.status == '00'">-->
<!--                            <Tag color="success" size="default">启用</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '01'">-->
<!--                            <Tag color="warning" size="default">审核中</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '02'">-->
<!--                            <Tag color="default" size="default">草稿</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '03'">-->
<!--                            <Tag color="warning" size="default">退回</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '04'">-->
<!--                            <Tag color="error" size="default">拒绝</Tag>-->
<!--                        </div>-->
<!--                        <div v-if="row.status == '05'">-->
<!--                            <Tag color="error" size="default">停用</Tag>-->
<!--                        </div>-->

                    </template>
                    <template slot-scope="{ row }" slot="action">
                <span v-if="row.status=='00'||row.status=='02'||row.status=='05'||row.status=='03'">
                  <Button v-has="'button_witness_edit'" style="margin-right:5px" type="primary" size="small" @click="edit(row)">编辑</Button>
                </span>
                        <span v-if="row.status!='00'&&row.status!='02'&&row.status!='05'&&row.status!='03'">
                  <Button v-has="'button_witness_edit'" disabled style="margin-right:5px" type="primary" size="small" @click="edit(row)">编辑</Button>
                </span>
                        <span v-if="row.status=='02'">
                  <Button v-has="'button_witness_del'" type="error" size="small" @click="remove(row)">删除</Button>
                </span>
                        <span v-if="row.status!='02'">
                  <Button v-has="'button_witness_del'" disabled type="error" size="small" @click="remove(row)">删除</Button>
                </span>
                    </template>
                </Table>
            </div>
            <br/>
            <Row type="flex" justify="end">
                <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                      @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small"
                      show-total show-elevator show-sizer></Page>
            </Row>
        </div>
    <Modal :title="modalTitle" v-model="userModalVisible" :mask-closable='false' :width="500" :styles="{top: '90px'}">
      <Form ref="userForm" :model="userForm" :label-width="120" :rules="userFormValidate" style="margin-top: 20px">
        <FormItem label="停用原因" prop="startStopReason">
          <Input v-model="userForm.startStopReason" type="textarea" :rows="4" autocomplete="off" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelUser">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
      </div>
    </Modal>

    <Modal v-model="modal2" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>停用确认</span>
        </p>
        <div style="text-align:center" >
            <p v-if="this.sysUser.length>0">权限账号见证人：<span  v-for="item in sysUser" :key="item.id">{{item.witnessName}};</span></p>
            <p v-if="this.carWitness.length>0">见证中单子：<span  v-for="item in carWitness" :key="item.id">{{item.witnessName}};</span></p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long  @click="dels">停用</Button>
        </div>
    </Modal>

  </div>
</template>

<script>
import {
  getChannelWitnessListData,
  channelUpAllByIds,
  channelDelWitness,
  channelCheckRole
} from "@/projects/afs-channel/api/witness/witness";
import { getDictDataByType } from "@/projects/basic/api/admin/datadic";
import { getChannelBaseInfo,getChannelId } from "@/projects/afs-apply/api/register-mng/listRecord";

export default {
  name: "witness-record",
  components: {},
  data() {
    const validateMobile = (rule, value, callback) => {
      if(value.length>0){
        var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(value)) {
          callback(new Error("手机号格式错误"));
        } else {
          callback();
        }
      }else{
        callback();
      }
    };
    return {
      loading: true,
      operationLoading: false,
      drop: false,
      dropDownContent: "更多",
      dropDownIcon: "ios-arrow-down",
      selectCount: 0,
      selectList: [],

      newCar: false, // 新车
      oldCar: false, // 旧车
      baseInfo: [], //合作商集合
      statusList: [], // 状态的数据字典

      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        witnessName: "",
        witnessIdCard: "",
        businessAttributes: "",
        witnessContactNumber: "",
        status: "",
        channelId: null
      },

      hisSearchForm:{
        pageNumber: 1,
        pageSize: 10,
        witnessName: "",
        witnessIdCard: "",
        businessAttributes: "",
        witnessContactNumber: "",
        status: "",
        channelId: null
      },

      modalType: 0,
      userModalVisible: false,
      modalTitle: "请输入停用原因！",
      submitLoading: false,

      //删除提示框
      modal2: false,
      modal_loading: false,

      // 下面是存提示窗的人
      sysUser:[],//有权限账号的见证人
      carWitness:[],// 正在见证进件的人

      // 应有的字段信息
      columns: [
        {
          type: "selection",
          minWidth: 60,
          maxWidth: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "序号",
          type: "index",
          minWidth: 80,
          align: "center",
          fixed: "left"
        },
        {
          title: "姓名",
          key: "witnessName",
          minWidth: 200,
          align: "center",
          fixed: "left",
          ellipsis: true
        },
        {
          title: "业务类型",
          key: "businessAttributes",
          minWidth: 120,
          maxWidth: 120,
          align: "center",
          slot: "businessAttributes"
        },
        {
          title: "身份证号码",
          key: "witnessIdCard",
          minWidth: 160,
          align: "center",
          slot: "witnessIdCard"
        },
        {
          title: "电话号码",
          key: "witnessContactNumber",
          minWidth: 120,
          align: "center"
        },
        {
          title: "状态显示",
          key: "status",
          minWidth: 100,
          align: "center",
          slot: "status"
        },

        {
          title: "审核通过时间",
          key: "approveTime",
          minWidth: 120,
          align: "center"
          //sortable: true
        },
        {
          title: "停用时间",
          key: "ceaseTime",
          minWidth: 100,
          align: "center"
          //sortable: true,
        },
        {
          title: "授权有效截止时间",
          key: "witnessValidityAuthorization",
          minWidth: 100,
          align: "center"
          //sortable: true,
        },
        {
          title: "备注",
          key: "remake",
          minWidth: 150,
          align: "center"
          //sortable: true,
        },
        {
          title: "审批备注",
          key: "startStopReason",
          align: "center",
          minWidth: 200,
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "操作",
          key: "action",
          minWidth: 150,
          align: "center",
          fixed: "right",
          slot: "action"
        }
      ],
      data: [],
      total: 0,
      // 停用的表单
      userForm: {
        startStopReason: null //停用原因
      },
      userFormValidate: {
        startStopReason: [
          { required: true, message: "请输入原因", trigger: "blur" }
        ]
      },
      limitPut:[
           { required: false,  message:  "请输入正确的手机号",  trigger: "blur" },
           { validator: validateMobile, trigger: "blur" }

        ],
    };
  },
  watch: {
    '$route'(to,from){
            if(from.path.indexOf("witness-add")>-1||from.path.indexOf("witness-edit")>-1 || from.path.indexOf("witness-examine")>-1){
                this.handleReset();
        }
    }
},
  methods: {
    init() {

      this.getBaseInfo();
      this.getChannelStatus();
      this.getChannelId();
    },
     // 获取渠道id
    getChannelId(){
      getChannelId({}).then(res => {
        if (res.code === "0000") {
          this.searchForm.channelId = res.data;
          this.getWitnessList();
        }
      });

    },
    // 获取状态数据字典
    getChannelStatus() {
      let param = {
        type: "channelStatus"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.statusList = res.data;
        }
      });
    },
    // 改变一页多少个
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.hisSearchForm.pageNumber =v;
      // this.getWitnessList();
      this.getHisWitnessList();
      this.clearSelectAll();
    },
    // 一页多少个
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.hisSearchForm.pageSize =v;
      // this.getWitnessList();
      this.getHisWitnessList();
      this.clearSelectAll();
    },
    // 查找见证人
    getWitnessList() {
       console.log("第一次看id:"+this.searchForm.channelId)
      if(this.searchForm.channelId==null||this.searchForm.channelId==undefined||this.searchForm.channelId==""){
        console.log("第二次看id:"+this.searchForm.channelId)
        // this.$Message.warning("登录用户渠道信息不正确！");
        return;
      }
      // 多条件查询见证人列表
      this.loading = true;
      if(this.searchForm.witnessName!=null&&this.searchForm.witnessName!=undefined&&this.searchForm.witnessName!=""){
        this.searchForm.witnessName=this.searchForm.witnessName.replace(/\s*/g,"");
      }
      if(this.searchForm.witnessIdCard!=null&&this.searchForm.witnessIdCard!=undefined&&this.searchForm.witnessIdCard!=""){
        this.searchForm.witnessIdCard=this.searchForm.witnessIdCard.replace(/\s*/g,"");
      }
      if(this.searchForm.witnessContactNumber!=null&&this.searchForm.witnessContactNumber!=undefined&&this.searchForm.witnessContactNumber!=""){
        this.searchForm.witnessContactNumber=this.searchForm.witnessContactNumber.replace(/\s*/g,"");
      }
      getChannelWitnessListData(this.searchForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    getHisWitnessList() {
       console.log("第一次看id:"+this.hisSearchForm.channelId)
      if(this.hisSearchForm.channelId==null||this.hisSearchForm.channelId==undefined||this.hisSearchForm.channelId==""){
        console.log("第二次看id:"+this.hisSearchForm.channelId)
        // this.$Message.warning("登录用户渠道信息不正确！");
        return;
      }
      // 多条件查询见证人列表
      this.loading = true;
      if(this.hisSearchForm.witnessName!=null&&this.hisSearchForm.witnessName!=undefined&&this.hisSearchForm.witnessName!=""){
        this.hisSearchForm.witnessName=this.hisSearchForm.witnessName.replace(/\s*/g,"");
      }
      if(this.hisSearchForm.witnessIdCard!=null&&this.hisSearchForm.witnessIdCard!=undefined&&this.hisSearchForm.witnessIdCard!=""){
        this.hisSearchForm.witnessIdCard=this.hisSearchForm.witnessIdCard.replace(/\s*/g,"");
      }
      if(this.hisSearchForm.witnessContactNumber!=null&&this.hisSearchForm.witnessContactNumber!=undefined&&this.hisSearchForm.witnessContactNumber!=""){
        this.hisSearchForm.witnessContactNumber=this.hisSearchForm.witnessContactNumber.replace(/\s*/g,"");
      }
      getChannelWitnessListData(this.hisSearchForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    // 获取合作商信息接口
    getBaseInfo() {
      getChannelBaseInfo({status: ""}).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.baseInfo = res.data;
        }
      });
    },
    //查询按钮操作
    handleSearch() {
      // if(this.searchForm.witnessContactNumber.length>0){
      //   var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      //   if (!reg.test(this.searchForm.witnessContactNumber)) {
      //    this.$Message.warning("请输入正确的手机号！");
      //   return;
      //   }

      // }
      // 0 ：代表新车二手车都查 1：代表只查二手车 2：代表只查新车
      if (this.newCar && this.oldCar) {
        this.searchForm.businessAttributes = "00";
      } else if (this.oldCar) {
        this.searchForm.businessAttributes = "1";
      } else if (this.newCar) {
        this.searchForm.businessAttributes = "0";
      } else {
        this.searchForm.businessAttributes = "";
      }
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;

      // 把搜索的参数赋值给历史记录
      this.hisSearchForm.pageNumber=this.searchForm.pageNumber;
      this.hisSearchForm.pageSize=this.searchForm.pageSize;
      this.hisSearchForm.witnessName =this.searchForm.witnessName;
      this.hisSearchForm.witnessIdCard =this.searchForm.witnessIdCard;
      this.hisSearchForm.businessAttributes =this.searchForm.businessAttributes;
      this.hisSearchForm.witnessContactNumber =this.searchForm.witnessContactNumber;
      this.hisSearchForm.status=this.searchForm.status;
      this.hisSearchForm.channelId=this.searchForm.channelId;
      this.getWitnessList();
    },
    // 点击重置
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.witnessName = "";
      this.searchForm.witnessIdCard = "";
      this.searchForm.businessAttributes = "";
      this.searchForm.witnessContactNumber = "";
      this.searchForm.status = "";
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.newCar = false;
      this.oldCar = false;

      // 把搜索的参数赋值给历史记录
      this.hisSearchForm.pageNumber=this.searchForm.pageNumber;
      this.hisSearchForm.pageSize=this.searchForm.pageSize;
      this.hisSearchForm.witnessName =this.searchForm.witnessName;
      this.hisSearchForm.witnessIdCard =this.searchForm.witnessIdCard;
      this.hisSearchForm.businessAttributes =this.searchForm.businessAttributes;
      this.hisSearchForm.witnessContactNumber =this.searchForm.witnessContactNumber;
      this.hisSearchForm.status=this.searchForm.status;
      this.hisSearchForm.channelId=this.searchForm.channelId;
      this.getChannelId();

    },
    // 排序
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getWitnessList();
    },
    // 跳转新增页面
    add() {
      let params = {
        type: 1
      };
      this.afs.newTab(
        this,
        "projects/afs-apply/pages/witness/witness-add-edit/witnessAddEdit",
        "见证人新增",
        "ios-add",
        params,
        "witness-add",
        [],
        true
      );
    },
    // 跳转编辑
    edit(v) {
      if (v.status == "01") {
        this.$Message.warning("审核中不可以编辑！");
        return;
      }
      if (v.status == "04") {
        this.$Message.warning("拒绝不可以编辑！");
        return;
      }
      let params = {
        id: v.id,
        type: 2
      };
      this.afs.newTab(
        this,
        "projects/afs-apply/pages/witness/witness-add-edit/witnessAddEdit",
        "见证人修改:"+v.witnessName,
        "ios-add",
        params,
        "witness-edit"+v.id,
        [],
        true
      );
    },
    // 点击查看
    see(v) {
      let params = {
        id: v.id,
        type: 3
      };
      this.afs.newTab(
        this,
        "projects/afs-apply/pages/witness/witness-add-edit/witnessAddEdit",
        "见证人:"+v.witnessName,
        "ios-add",
        params,
        "witness-see"+v.id,
        [],
        true
      );
    },

    dropDown() {
      if (this.drop) {
        this.dropDownContent = "更多";
        this.dropDownIcon = "ios-arrow-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "ios-arrow-up";
      }
      this.drop = !this.drop;
    },
    showSelect(e) {
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },

    // 停用时查看权限账号
    checkRole(){
      this.userForm.startStopReason=null;
      if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要停用的数据");
        return;
      }
      for (var i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].status != "00") {
          this.$Message.warning("仅能停用已启用状态的见证人，请重新选择！");
          this.clearSelectAll();
          return;
        }
      }
      this.sysUser=[];
      this.carWitness=[];
      let ids = [];
      this.selectList.forEach(function(e) {
        ids += e.id + ",";
      });
      ids = ids.substring(0, ids.length - 1);
      this.operationLoading = true;
      let obj = {
        ids: ids
      };
      channelCheckRole(obj).then(res => {
        this.operationLoading = false;
        if (res.code === "0000") {
          if(res.adminUser.length>0||res.applyUser.length){
            this.modal2=true;
            this.sysUser=res.adminUser;
            this.carWitness =res.applyUser;

          }else{
            this.stopUse();
          }
        }
      });
    },

     // s权限删除提醒
    dels () {
                this.modal_loading = true;
                setTimeout(() => {
                    this.modal_loading = false;
                    this.modal2 = false;
                    // 进入删除
                    this.stopUse();
                }, 2000);
            },

    // 暂停见证人状态
    stopUse() {
      if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要停用的数据");
        return;
      }
      for (var i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].status != "00") {
          this.$Message.warning("仅能停用已启用状态的见证人，请重新选择！");
          this.clearSelectAll();
          return;
        }
      }
      this.userModalVisible = true;
    },
    // 关闭弹窗
    cancelUser() {
      this.userModalVisible = false;
      this.userForm.startStopReason = null;
    },
    // 确定提交
    submitUser() {
      if (
        this.userForm.startStopReason == null ||
        this.userForm.startStopReason == "" ||
        this.userForm.startStopReason == undefined
      ) {
        this.$Message.warning("请输入停用原因");
        return;
      }
      let ids = [];
      this.selectList.forEach(function(e) {
        ids += e.id + ",";
      });
      ids = ids.substring(0, ids.length - 1);
      this.operationLoading = true;
      let obj = {
        ids: ids,
        startStopReason: this.userForm.startStopReason.replace(/\s*/g,"")
      };
      channelUpAllByIds(obj).then(res => {
        this.operationLoading = false;
        if (res.code === "0000") {
          this.userModalVisible = false;
          this.$Message.success("停用成功");
          this.clearSelectAll();
          this.getWitnessList();
        }
      });
    },
    // 删除方法
    remove(v) {
      if (v.status != "02") {
        this.$Message.warning("只有草稿状态才可以删除！");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删该信息吗 ?",
        onOk: () => {
          this.operationLoading = true;
          channelDelWitness({ id: v.id }).then(res => {
            this.operationLoading = false;
            if (res.code === "0000") {
              this.$Message.success("删除成功");
              this.getWitnessList();
            }
          });
        }
      });
    }
  },
  mounted() {
    this.init();
    this.handleReset();
  }
};
</script>
